<template>
  <view>
    <tn-nav-bar fixed :bottomShadow="false" :backgroundColor="navBarBackgroundColor" id="navbar" />
    <!-- 立体头像-->
    <view class='cube' :style="'background-image: url(https://cdn.cuuo.cn/images/user-bg.png);'">
      <view class="cube__container">
        <view class="cube__container__body">
          <view class="cube__container__body__item cube__container__body__item--front"
            :style="{ backgroundImage: `url(${avatar})` }"></view>
          <view class="cube__container__body__item cube__container__body__item--back"
            :style="{ backgroundImage: `url(${avatar})` }"></view>
          <view class="cube__container__body__item cube__container__body__item--right"
            :style="{ backgroundImage: `url(${avatar})` }"></view>
          <view class="cube__container__body__item cube__container__body__item--left"
            :style="{ backgroundImage: `url(${avatar})` }"></view>
          <view class="cube__container__body__item cube__container__body__item--top"
            :style="{ backgroundImage: `url(${avatar})` }"></view>
          <view class="cube__container__body__item cube__container__body__item--bottom"
            :style="{ backgroundImage: `url(${avatar})` }"></view>
        </view>
      </view>
      <view class='tn-text-center tn-margin-top-lg'>
        <view class="tn-padding tn-text-bold tn-text-lg">{{ nickname }}</view>
      </view>
    </view>

    <!-- 消息&数据 -->
    <!-- <view class="blogger-tips-data">
      <view class="blogger-tips-data__wrap tn-bg-white">
        <view class="tn-flex">
          <view class="tn-flex-1 tn-padding-sm tn-margin-xs">
            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
              <view class="">
                <view class="tn-text-xxl tn-color-red">{{ $t.number.formatNumberAddPriceUnit(tipsDataMessage.fansCount) }}
                </view>
              </view>
              <view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
                <text class="tn-icon-vip"></text>
                <text class="tn-padding-left-xs">粉丝</text>
              </view>
            </view>
          </view>
          <view class="tn-flex-1 tn-padding-sm tn-margin-xs">
            <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
              <view class="">
                <view class="tn-text-xxl tn-color-cyan">{{ $t.number.formatNumberAddPriceUnit(tipsDataMessage.focusCount) }}</view>
              </view>
              <view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
                <text class="tn-icon-star"></text>
                <text class="tn-padding-left-xs">关注</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view> -->
    <!-- 内容 -->
    <view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom" id="page_tips">
      <!-- 图文信息 -->
      <u-empty mode="data" v-if="!content.length" icon="http://cdn.uviewui.com/uview/empty/data.png" />
      <block v-for="(item, index) in content" :key="index">
        <view class="blogger__item tn-flex tn-flex-direction-column" @click="clickTo(`/circle/details/details?id=${item.id}`)">
          <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
            <view class="justify__author__info">
              <view class="tn-flex tn-flex-row-center">
                <view class="tn-flex tn-flex-row-center tn-flex-col-center">
                  <view>
                    <tn-avatar shape="circle" :src="item.avatar" size="lg" />
                    <text :class="item.sex == 1 ? 'tn-icon-sex-male tn-color-blue' : 'tn-icon-sex-female tn-color-red'" style="position: absolute; margin-left: -12rpx; margin-top: -5rpx;"></text>
                  </view>
                  <view class="tn-padding-right tn-text-ellipsis">
                    <view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-lg">
                      {{ item.nickname }}
                    </view>
                    <view class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray">
                      {{ $u.timeFrom(item.createTime) }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
              <text class="tn-icon-more-vertical tn-color-gray tn-text-bold tn-text-xxl"></text>
            </view>
          </view>
          <view
            class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left">
            <view v-for="(tags_item, tags_index) in item.tags" :key="tags_index"
              class="blogger__desc__label tn-float-left tn-margin-right tn-round tn-text-sm"
              :class="tags_index == 1 ? 'tn-bg-red--light' : tags_index == 2 ? 'tn-bg-cyan--light' : 'tn-bg-blue--light'">
              <text>#</text>
              <text class="tn-text-df">{{ tags_item }}</text>
            </view>
          </view>
          <view>
            <text class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df">{{ item.content }}</text>
          </view>
          <block v-if="item.images">
            <view v-if="[1, 2, 4].indexOf(item.images.length) != -1" class="tn-padding-top-xs">
              <image v-for="(image_item, image_index) in item.images" :key="image_index" class="blogger__main-image"
                :class="{
                  'blogger__main-image--1 tn-margin-bottom-sm': item.images.length === 1,
                  'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.images.length === 2 || item.images.length === 4
                }" :src="image_item" mode="aspectFill" />
            </view>
            <view v-else class="tn-padding-top-xs">
              <tn-grid hoverClass="none" :col="3">
                <block v-for="(image_item, image_index) in item.images" :key="image_index">
                  <!-- #ifndef MP-WEIXIN -->
                  <tn-grid-item style="width: 30%;margin: 10rpx;">
                    <image class="blogger__main-image blogger__main-image--3" :src="image_item" mode="aspectFill" />
                  </tn-grid-item>
                  <!-- #endif-->
                  <!-- #ifdef MP-WEIXIN -->
                  <tn-grid-item style="width: 30%;margin: 10rpx;">
                    <image class="blogger__main-image blogger__main-image--3" :src="image_item" mode="aspectFill" />
                  </tn-grid-item>
                  <!-- #endif-->
                </block>
              </tn-grid>
            </view>
          </block>
          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
            <view class="justify-content-item tn-color-gray tn-text-center">
              <view>
                <text class="blogger__count-icon tn-icon-eye"></text>
                <text class="tn-padding-right">{{ item.views }}</text>
                <text class="blogger__count-icon tn-icon-message"></text>
                <text class="tn-padding-right">{{ item.comments }}</text>
              </view>
            </view>
            <view class="justify-content-item tn-flex tn-flex-col-center">
              <view style="margin-right: 10rpx;margin-left: 20rpx;">
                <tn-avatar-group :lists="item.likesAvatar" size="sm" />
              </view>
              <text class="tn-color-gray">{{ item.likes }}人</text>
            </view>
          </view>
        </view>
        <!-- 边距间隔 -->
        <view class="tn-strip-bottom" v-if="index != content.length - 1"></view>
      </block>
      <!-- 广告 -->
      <view class="bannerad" :style="{ 'transform': 'scale(' + (screenWidth - 40) / 300 + ')!important' }">
        <ad class="ad" unit-id="adunit-de6843b4251e1367"></ad>
      </view>
      <u-loadmore :status="load" />
    </view>
  </view>
</template>

<script>
import { userList } from '@/api'
export default {
  components: {},
  data() {
    return {
      uid: null,
      avatar: null,
      nickname: null,
      page: 1,
      size: 100,
      tipsDataMessage: {
        messageCount: 3,
        likeCount: 1290,
        hotReviewsCount: 896,
        fansCount: 962,
        focusCount: 86
      },
      content: [],
      navBarRectInfo: {},
      navBarChangebaseLineHeight: 0,
      navBarStyle: {
        color: '#FFFFFF',
        opacity: 1,
        display: 'flex'
      },
      navBarStyle2: {
        color: 'rgba(255,255,255,0)',
        opacity: 1,
        display: 'flex'
      },
      navBarBackgroundColor: 'rgba(255, 255, 255, 0)',
    }
  },
  computed: {},
  methods: {
    // 获取动态
    async getUserList() {
      const { uid, page, size } = this;
      const { code, data, message } = await userList({ userId: uid, page, size });
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.loading = false;
      this.content = data.list;
      this.avatar = data.avatar;
      this.nickname = data.nickname;
    },

    // 跳转
    clickTo(e) {
      uni.navigateTo({
        url: e
      });
    },

    // 初始化导航栏信息
    async initNavBarRectInfo() {
      const navBarRectInfo = await this._tGetRect('#navbar');
      const pageTipsRectInfo = await this._tGetRect('#page_tips');
      if (!navBarRectInfo.hasOwnProperty('top') || !pageTipsRectInfo.hasOwnProperty('top')) {
        setTimeout(() => { this.initNavBarRectInfo() }, 10);
        return;
      }
      this.navBarRectInfo = { top: navBarRectInfo.top };
      this.navBarChangebaseLineHeight = pageTipsRectInfo.top - navBarRectInfo.top;
    },

    // 更新导航栏信息
    updateNavBarRectInfo() {
      this._tGetRect('#page_tips').then((res) => {
        const top = res?.top || 0;
        if (!top) return;
        const differHeight = top - this.navBarRectInfo.top;
        const opacity = differHeight / this.navBarChangebaseLineHeight;
        if (opacity < 0) {
          this.navBarStyle.color = 'rgba(0, 0, 0, ${opacity})';
          this.navBarStyle2.color = 'rgba(0, 0, 0, ${opacity})';
          this.navBarBackgroundColor = `rgba(255, 255, 255, 1)`;
        } else {
          this.navBarStyle.color = 'rgba(255, 255, 255, 1)';
          this.navBarStyle2.color = 'rgba(255, 255, 255, 0)';
          this.navBarBackgroundColor = `rgba(255, 255, 255, ${1 - opacity})`;
        }
      });
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(options) {
    this.uid = options.id;
    this.getUserList();
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {
    this.$nextTick(() => {
      this.initNavBarRectInfo();
    })
  },
  onPageScroll() {
    this.updateNavBarRectInfo();
  },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
} 
</script>

<style lang="scss" scoped>
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #FFFFFF;
  }
}

$cube-size: 120rpx;
$cube-split: 60rpx;

/* 立体头像 start*/

.cube {
  background: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  height: 550rpx;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  font-weight: 300;

  &__container {
    margin-top: 180rpx;
    position: relative;
    width: $cube-size;
    height: $cube-size;
    -webkit-perspective: 500px;
    perspective: 500px;

    &:before {
      content: '';
      width: $cube-size;
      height: $cube-size;
      position: absolute;
      background-color: #3c6496;
      filter: blur(60px);
      opacity: .8;
    }

    &__body {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transform: translateZ(-75px);
      animation: cubeFrame 35s cubic-bezier(0.36, -0.03, 0.46, 0.95) infinite alternate;
      will-change: transform;

      &__item {
        position: absolute;
        display: block;
        display: flex;
        align-items: center;
        justify-content: center;
        width: $cube-size;
        height: $cube-size;
        font-size: 30px;
        background-repeat: no-repeat;
        background-size: cover;

        &--front {
          transform: rotateY(0deg) translateZ($cube-split);
          background-color: #BEEBFF;
        }

        &--back {
          transform: rotateX(180deg) translateZ($cube-split);
          background-color: #BEEBFF;
        }

        &--right {
          transform: rotateY(90deg) translateZ($cube-split);
          background-color: #BEEBFF;
        }

        &--left {
          transform: rotateY(-90deg) translateZ($cube-split);
          background-color: #BEEBFF;
        }

        &--top {
          transform: rotateX(90deg) translateZ($cube-split);
          background-color: #BEEBFF;
        }

        &--bottom {
          transform: rotateX(-90deg) translateZ($cube-split);
          background-color: #BEEBFF;
        }
      }
    }
  }
}

@keyframes cubeFrame {
  10% {
    transform: translateZ(-75px) rotateX(40deg) rotateY(60deg);
  }

  15% {
    transform: translateZ(-75px) rotateX(80deg) rotateY(20deg);
  }

  20% {
    transform: translateZ(-75px) rotateX(-180deg) rotateY(-70deg);
  }

  30% {
    transform: translateZ(-75px) rotateX(90deg) rotateY(180deg);
  }

  40% {
    transform: translateZ(-75px) rotateX(-10deg) rotateY(-140deg);
  }

  45% {
    transform: translateZ(-75px) rotateX(-100deg) rotateY(20deg);
  }

  55% {
    transform: translateZ(-75px) rotateX(-10deg) rotateY(-35deg);
  }

  60% {
    transform: translateZ(-75px) rotateX(180deg) rotateY(360deg);
  }

  70% {
    transform: translateZ(-75px) rotateX(-180deg) rotateY(-360deg);
  }

  80% {
    transform: translateZ(-75px) rotateX(45deg) rotateY(-70deg);
  }

  90% {
    transform: translateZ(-75px) rotateX(-45deg) rotateY(70deg);
  }

  100% {
    transform: translateZ(-75px) rotateX(-360deg) rotateY(360deg);
  }
}

/* 立体头像 end*/

.blogger-tips-data {
  background-color: #F8F7F3;

  &__wrap {
    border-radius: 60rpx 60rpx 0 0;
  }

  &__message {
    padding-top: 60rpx;

    &__container {
      padding: 5rpx;
      border-radius: 100rpx;
    }

    &__avatar {
      margin: 6rpx 0 0 6rpx;
    }
  }
}

/* 文章内容 start*/
.blogger {
  &__item {
    padding: 30rpx;
  }

  &__author {
    &__btn {
      margin-right: -12rpx;
      opacity: 0.5;
    }
  }

  &__desc {
    line-height: 40rpx;

    &__label {
      padding: 0 20rpx;
      margin: 0rpx 18rpx 0 0;

      &--prefix {
        color: #00FFC8;
        padding-right: 10rpx;
      }
    }
  }

  &__content {
    margin-top: 18rpx;
    padding-right: 18rpx;

    &__data {
      line-height: 46rpx;
      text-align: justify;
      overflow: hidden;
      transition: all 0.25s ease-in-out;

    }

    &__status {
      margin-top: 10rpx;
      font-size: 26rpx;
      color: #82B2FF;
    }
  }

  &__main-image {
    border-radius: 16rpx;

    &--1 {
      width: 100%;
      height: 400rpx;
    }

    &--2 {
      max-width: 325rpx;
      max-height: 325rpx;
    }

    &--3 {
      height: 212rpx;
      width: 100%;
    }
  }

  &__count-icon {
    font-size: 40rpx;
    padding-right: 5rpx;
  }

  &__ad {
    width: 100%;
    height: 500rpx;
    transform: translate3d(0px, 0px, 0px) !important;

    ::v-deep .uni-swiper-slide-frame {
      transform: translate3d(0px, 0px, 0px) !important;
    }

    .uni-swiper-slide-frame {
      transform: translate3d(0px, 0px, 0px) !important;
    }

    &__item {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-origin: left center;
      transform: translate3d(100%, 0px, 0px) scale(1) !important;
      transition: transform 0.25s ease-in-out;
      z-index: 1;

      &--0 {
        transform: translate3d(0%, 0px, 0px) scale(1) !important;
        z-index: 4;
      }

      &--1 {
        transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
        z-index: 3;
      }

      &--2 {
        transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
        z-index: 2;
      }
    }

    &__content {
      border-radius: 40rpx;
      width: 640rpx;
      height: 500rpx;
      overflow: hidden;
    }

    &__image {
      width: 100%;
      height: 100%;
    }
  }
}

/* 文章内容 end*/

/* 间隔线 start*/
.tn-strip-bottom {
  width: 100%;
  border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}

/* 间隔线 end*/
/* 底部悬浮按钮 start*/
.tn-tabbar-height {
  min-height: 100rpx;
  height: calc(120rpx + env(safe-area-inset-bottom) / 2);
}

.tn-footerfixed {
  position: fixed;
  width: 100%;
  bottom: calc(30rpx + env(safe-area-inset-bottom));
  z-index: 1024;
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

}

/* 底部悬浮按钮 end*/

/* 广告内容 start */
.ad-image {
  width: 80rpx;
  height: 80rpx;
  position: relative;
}

.ad-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 20%;
}

.bannerad {
		display: flex;
		justify-content: center;
	}

	.bannerad .ad {
		flex: 1;
	}
</style>